<template>
  <el-row style="background:white;margin-bottom:0px">
    <el-row style="border:1px solid #d3d3d3;width: 98%;height:35px;margin-left:5px;line-height:35px;background:#f7f7f7">
      <el-col :span="12" style="font-size:14px">
        &nbsp;项目类型统计
      </el-col>
      <!-- <el-col :span="10" :offset="1">
        <el-select placeholder="请选择" v-model="projectType">
          <el-option v-for=" item in selections" :label="item.label" :value="item.value" :key="item.value">
          </el-option>
        </el-select>
      </el-col> -->
    </el-row>
    <div id="main" style="width: 98%;height:205px;border:1px solid #d3d3d3;margin-left:5px"></div>
  </el-row>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// 项目类型统计
export default {
  name: 'projectTypeStatistics',
  // mixins: [mixin_list],
  data() {
    return {
      seriesDataType: [],
      selections: [
        {
          value: '2020',
          label: '2020'
        },
        {
          value: '2019',
          label: '2019'
        },
        {
          value: '2018',
          label: '2018'
        }
      ],
      projectType: ''
    }
  },
  mounted() {
    // this.getProjectOverallInfo()
  },
  methods: {
    setLineOptionForType() {
      // let mychart = echarts.init(this.$el, 'macarons')

      let mychart = echarts.init(document.getElementById('main'))
      var seriesForThis = this.seriesDataType
      var option = {
        // color: ['#0066FF', '#00FF66', '#66CCFF'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            top: 120,
            itemGap: 2,
            // left: '10%',
            width: '100%',
            height: 60,
            itemWidth: 15,
            data: seriesForThis,
            textStyle: { fontSize: 10 },
            formatter: function formatter(name) {
              var index = 0
              var dataTemp = seriesForThis
              dataTemp.forEach(function formatter(value, i) {
                if (value.name === name) {
                  index = i
                }
              })
              return name + dataTemp[index].value + '个'
            }
          }
        ],
        series: [
          {
            name: '项目类型',
            type: 'pie',
            // 大小
            radius: ['40%', '55%'],
            // 位置
            center: ['45%', 60],
            avoidLabelOverlap: false,
            top: 0,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.seriesDataType
          }
        ]
      }
      mychart.setOption(option)
    }
  },
  created() {}
}
</script>

<style scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.child {
  background: #000;
  width: 10%;
  height: 10%;
}
</style>
